<template>
  <div>
    <h2>父组件(通过事件传值)</h2>
    姓名：{{ chinldData.name }}<br>
    年龄：{{ chinldData.age }}
    <br><br>
    <hr>
    <br>
    <Chinld ref="chinldRef" :name="chinldData.name" :age="chinldData.age" @funChange="changeName"></Chinld>
    <br>
    <hr>
    <br>
    <h2>父子组件(通过v-model)数据绑定</h2>
    姓名：{{ chinldDataVmodel.name }}<br>
    年龄：{{ chinldDataVmodel.age }}<br>
    参数：{{ testNameParam }}
    <ChinldVmodel ref="chinldVmodelRef"
                  v-model:chinld-data-vmodel="chinldDataVmodel"
                  v-model:test-name-param="testNameParam"></ChinldVmodel>
  </div>
</template>
<script setup>
import Chinld from "@/components/Chinld.vue";
import ChinldVmodel from "@/components/ChinldVmodel.vue";
import {computed, inject, provide, ref} from "vue";

const chinldRef = ref(null);

const chinldData = ref({
  name: '张三三',
  age: 29,
})

const chinldDataVmodel = ref({
  name: 'vmodel-张三三',
  age: 29,
})
const testNameParam = ref("第二参数")
// 声明
provide("testName", '张三三')
// 获取并赋值
const testName = inject('testName');

const changeName = (name) => {
  chinldData.value.name = name;
  // 能过模板ref调用子组件
  console.log('父组件', chinldRef.value.props)
  chinldRef.value.childFuction({a: 'dd', b: 'dd'})
}
</script>
<style scoped>

</style>